<html>
<head>
	<script src="../yui/build/yuiloader/yuiloader-beta-min.js"></script>  
 
	<script>  
	//instantiate Loader:  
	loader = new YAHOO.util.YUILoader();  
	 
	//identify the components you want to load:  
	loader.require("treeview");  
	 
	//configure Loader by setting any of its  
	//configuration properties:  
	loader.loadOptional = true;  
	 
	//Load the files using the insert(callback)  
	//method. Your callback will be executed once  
	//all your required files are loaded.  
	loader.insert(function() {  
		//this is your callback function; you can use  
		//this space to call all of your instantiation  
		//logic for the components you just loaded.  
	});
	
	var tree;
	function treeInit() {
		tree = new YAHOO.widget.TreeView("myTreeview");
		
		var root = tree.getRoot();
		
		var myData = {};
		
		// Set labelElId via myData has problem, so set it again
		myData = { label: "mylabel1", labelElId:"myid1", href: "http://www.google.com", target: "_blank" } ;
		var myNode1 = new YAHOO.widget.TextNode(myData, root, false);
		myNode1.labelElId = "myid1";
		
		myData = { label: "mylabel11", labelElId:"myid11" } ;
		var myNode11 = new YAHOO.widget.TextNode(myData, myNode1, false);
		
		myData = { label: "mylabel12", labelElId:"myid12" } ;
		var myNode12 = new YAHOO.widget.TextNode(myData, myNode1, false);
		myData = { label: "mylabel121", labelElId:"myid121" } ;
		var myNode11 = new YAHOO.widget.TextNode(myData, myNode12, false);
		myData = { label: "mylabel122", labelElId:"myid122" } ;
		var myNode11 = new YAHOO.widget.TextNode(myData, myNode12, false);
		
		myData = { label: "mylabel2", labelElId:"myid2", href: "http://www.google.com", target: "_blank" } ;
		var myNode2 = new YAHOO.widget.TextNode(myData, root, false);
		myNode2.labelElId = "myid2";
		
		myData = { label: "mylabel21", labelElId:"myid21" } ;
		var myNode21 = new YAHOO.widget.TextNode(myData, myNode2, false);
		
		myData = { label: "mylabel22", labelElId:"myid22" } ;
		var myNode22 = new YAHOO.widget.TextNode(myData, myNode2, false);
		
		// Expand and collapse happen prior to the actual expand/collapse,
		// and can be used to cancel the operation
		tree.subscribe("expand", function(node) {
			// return false to cancel the expand
			// return false;
		});
		tree.subscribe("collapse", function(node) {
			// return false to cancel the collapse
			// return false;
		});
		// Trees with TextNodes will fire an event for when the label is clicked:
		tree.subscribe("labelClick", function(node) {
			alert("node.labelElId: " + node.labelElId);
			alert("node.label: " + node.label);
			// return false to cancel the click
			// return false;
		});

		tree.draw();
	}
	</script> 
</head>
<body onload="treeInit()">
	<div id="myTreeview"></div>
</body>
</html>